<template>
  <div id="login-card">
    <el-row>
      <el-col :span="8"><label for="username">用户名:</label></el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-input
          id="username"
          v-model="username"
          placeholder="请输入用户名"
        ></el-input>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8"> <label for="pwd">密码:</label></el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-input
          id="pwd"
          placeholder="请输入密码"
          v-model="pwd"
          show-password
        ></el-input>
      </el-col>
    </el-row>

    <!-- <el-row>
      <el-col :span="8"> <label for="checkCode">验证码:</label></el-col>
    </el-row>
    <el-row>
      <el-col :span="10">
        <el-input
          id="checkCode"
          placeholder="请输入验证码"
          v-model="checkCode"
          clearable
        ></el-input>
      </el-col>
    </el-row> -->

    <el-row style="line-height: 15px"><hr /></el-row>

    <el-row>
      <el-col :span="24">
        <el-button @click="login()" type="success" style="width:100%;">登录</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
 import baseUrl from '../../../static/js/BaseUrl.js';
export default {
  name: "ByUserName",
  data() {
    return {
      username: "",
      pwd: "",
      checkCode: "",
    };
  },
  methods:{
     login() {
      let that = this;
      $.ajax({
        url: baseUrl.url+"/sys-user/passwordLogin",
        type: "post",
        contentType:"application/x-www-form-urlencoded",
        xhrFields: {
          withCredentials: true,
        },
        data: {
          userName: that.username,
          userPassword: that.pwd,
        },
        success(data) {
          if(data==='success'){
          that.$router.replace("/");
          location.reload();
          }
          
        },
        error() {
          console.log("error");
        },
      });
    },
  }
};
</script>

<style>
.el-row {
  margin: 5px;
}

label{
    font-size: 12px;
}


#login-card{
  height: inherit;
  width: inherit;
}
</style>